<template>
    <div class="main">
        <div class="first-floor">
            <Card class="first-floor-card" v-for="item in card" :key="item.name">
                <template #card_name>
                    {{item.name}}
                </template>
                <template #card_num>
                    {{item.num}}
                </template>
                <template #card_detial_left>
                    <div :style="{background:item.color,padding:'2px 10px',borderRadius:'5px',color: '#FFF'}">
                    {{item.detial_left}}
                    </div>
                </template>
                <template #card_img>
                    <img :src="item.img" :style="{width: '100%',height: '100%',border: '1px solid #e7e7e7',borderRadius: '10px'}" alt="">
                </template>
                <template #card_detial_rigth>
                    {{item.detial_rigth}}
                </template>
            </Card>
        </div>
        <div class="second-floor">
            <div class="second-floor-item1 second-floor-item">
                <NightingaleChart/>
            </div>
            <div class="second-floor-item2 second-floor-item">
                <LargeScaleAreaChart/>
            </div>
            <div class="second-floor-item3 second-floor-item">
                <StackedColumnChart/>
            </div>
        </div>
        <div class="Third-layer">
            <StackedLineChart/>
        </div>
    </div>
</template>

<script>
import Card from '@/components/slot/Card'
import NightingaleChart from '@/components/slot/Echarts/NightingaleChart'
import LargeScaleAreaChart from '@/components/slot/Echarts/LargeScaleAreaChart'
import StackedLineChart from '@/components/slot/Echarts/StackedLineChart'
import StackedColumnChart from '@/components/slot/Echarts/StackedColumnChart'
export default {
    name:'Main',
    components:{
        NightingaleChart,
        LargeScaleAreaChart,
        StackedLineChart,
        StackedColumnChart,
        Card
    },
    data() 
    {
        return {
            card:[
                {
                    name:'皮卡丘',
                    num:1000,
                    detial_left:'雷电系',
                    detial_rigth:'小智的宠物',
                    color:'#fad839',
                    img:'https://img0.baidu.com/it/u=1998687477,379022083&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=500'
                },
                {
                    name:'树枕尾熊',
                    num:600,
                    detial_left:'草系',
                    detial_rigth:'只会睡觉',
                    color:'#1cbb4e',
                    img:'https://img2.baidu.com/it/u=1294399840,1622221463&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=564'
                },
                {
                    name:'可达鸭',
                    num:50,
                    detial_left:'精神系',
                    detial_rigth:'已加入肯德基豪华套餐',
                    color:'#e0a810',
                    img:'https://img2.baidu.com/it/u=477727454,3381320548&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
                },
                {
                    name:'杰尼龟',
                    num:70,
                    detial_left:'水系',
                    detial_rigth:'花鸟鱼虫市场一大堆',
                    color:'#5498f6',
                    img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fm.uzzf.com%2Fup%2F2016-7%2F14684589095382551.gif&refer=http%3A%2F%2Fm.uzzf.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669285325&t=fbfa323022378cb21078ce23903c1640'
                },
            ]
        }
    },
    mounted() 
    {
        
    },
    methods: {
        
    },
}
</script>

<style lang="less" scoped>
    .main
    {
        .first-floor
        {
            height: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            .first-floor-card
            {
                width: 24.6%;
                margin-left: .4%;
            }
            .first-floor-card:nth-child(1)
            {
                margin-left: 0 !important;
            }
        }

        .second-floor
        {
            margin-top: 10px;
            height: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
            .second-floor-item
            {
                width: 32.8%;
                height: 100%;
                margin-left: 1%;
            }
            .second-floor-item:nth-child(1)
            {
                margin-left: 0!important;
            }
        }
        
        .Third-layer
        {
            height: 50%;
            margin-top: 10px;
        }
    }

    @media all and (max-width: 1300px)
    {
        .first-floor
        {                                   
            flex-wrap: wrap !important;                                        
            align-content:  space-between !important;  
            .first-floor-card
            {
                width: 49.6% !important;
                margin-left: .4%;
            }
            .first-floor-card:nth-child(3)
            {
                margin-left: 0;
                margin-top: 10px;
            }
            .first-floor-card:nth-child(4)
            {
                margin-top: 10px;
            }
        }

        .second-floor
        {
            flex-wrap: wrap !important;                                        
            align-content:  space-between !important;  
            .second-floor-item
            {
                width: 100% !important;
            }
            .second-floor-item:nth-child(1)
            {
                margin-top: 0 !important;
            }
            .second-floor-item:nth-child(1n+1)
            {
                margin-top: 10px;
                margin-left: 0;
            }
        }
    }

    @media all and (max-width: 800px)
    {
        .first-floor
        {                                   
            flex-wrap: wrap !important;                                        
            align-content:  space-between !important;  
            .first-floor-card
            {
                width: 100% !important;
                margin-left: 0 !important;
            }
            .first-floor-card:nth-child(1n+1)
            {
                margin-left: 0;
                margin-top: 10px;
            }
        }
    }

</style>